<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Page</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>

<body>
    <!-- <h1>Hello Customer Page</h1> -->
    <!-- 标签式导航 -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" id="nav-link-home" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#shopping">Shopping</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#unpaid_order">Unpaid Order</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#paid_order">Paid Order</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#order_received">Order Received</a>
        </li>
    </ul>

    <!-- 横坐标 -->
    <div class="container">
        <div class="row">
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">1</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">2</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">3</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">4</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">5</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">6</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">7</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">8</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">9</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">10</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">11</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">12</div>
        </div>
    </div>

    <div class="tab-content" id="myTabContent">
        <!-- home -->
        <div class="container tab-pane fade show active" id="home">
            home
            <div class="tab-pane-content">
                ...
            </div>
        </div>
        <!-- shopping -->
        <div class="container tab-pane fade" id="shopping">
            shopping
            <!-- businessman interface -->
            <div class="container shopping-tab-pane-content-businessman">
                <div class="row">
                    <h4 class="col-md-3 mb-0">Hello</h4>
                </div>
                <div class="row">
                    <a class="btn btn-block btn-light col-md-2 offset-md-10 text-center come_in" href="#" data-businessman_name="?">Come in</a>
                </div>
            </div>
            <!-- goods interface -->
            <div class="container shopping-tab-pane-content-goods">
                <!-- goods interface header -->
                <div class="container commdity-list-header">
                    <div class="row shopping-goods-header fade">
                        <div class="col-md-4 border bg-light text-center">
                            <p class="mb-0 p-3">type</p>
                        </div>
                        <div class="col-md-4 border bg-light text-center">
                            <p class="mb-0 p-3">stock</p>
                        </div>
                        <div class="col-md-4 border bg-light text-center">
                            <p class="mb-0 p-3">selling_price</p>
                        </div>
                    </div>
                </div>
                <!-- goods list -->
                <div class="container commdity-list">
                    <div class="row a-commodity fade">
                        <div class="col-md-4 border bg-light text-center specific-type">
                            <p class="mb-0 p-3">A</p>
                        </div>
                        <div class="col-md-4 border bg-light text-center specific-stock">
                            <p class="mb-0 p-3">1</p>
                        </div>
                        <div class="col-md-4 border bg-light text-center specific-price">
                            <p class="mb-0 p-3">23</p>
                        </div>
                    </div>
                </div>

                <hr class="fade commdity-hr">
                <!-- user order -->
                <form class="container" id="user-order" style="display: none;">
                    <div class="form-group">
                        <label class="form-label" for="">Product:</label>
                        <select class="form-select" id="user-order-select-part">
                            <option id="form-select-default" value="default">Please enter the product you want to buy</option>
                            <option id="form-select-product1" value="product1" data-price="commodity.price" data-stock="00">product1</option>  
                        </select>
                        <!-- <input class="form-control" type="text" placeholder="Please enter the product you want to buy"> -->
                    </div>
                    <div class="form-group mt-3">
                        <label class="form-label" for="">Count:</label>
                        <input class="form-control" id="user-order-count-part" type="number" placeholder="Please enter the quantity of the item to buy" value="0">
                    </div>
                    <div class="form-group mt-5">
                        <div class="row">
                            <a class="btn btn-block btn-light col-md-2 offset-md-10 text-center" id="submit-user-order-button" href="#" data-businessman_name="?">Submit</a>
                        </div>
                    </div>

                </form>
                
            </div>
            
        </div>
        <!-- unpaid order -->
        <div class="container tab-pane fade" id="unpaid_order">
            unpaid order
            <div class="tab-pane-content">
                ...
            </div>
        </div>
        <!-- paid order -->
        <div class="container tab-pane fade" id="paid_order">
            paid order
            <div class="tab-pane-content">
                ...
            </div>
        </div>
        <!-- complete order -->
        <div class="container tab-pane fade" id="order_received">
            order received
            <div class="tab-pane-content">
                ...
            </div>
        </div>
    </div>


    <script src="./JS/customer_user_page_event.js"></script>
</body>

</html>